<template>
  <div class="status-wrapper">
    <div class="slogan">为了共产主义事业奋斗终身</div>
    <div class="status">
      <!--  根据 根组件中的 logged 确定是否已经登录 -->
      <template v-if="$root.logged">
        <b>欢迎{{nickname}}</b>
        <i></i>
        <router-link to="/publish">发布话题</router-link>
        <i></i>
        <router-link to="/mine">我的话题</router-link>
        <i></i>
        <router-link to="/change">修改密码</router-link>
        <i></i>
        <router-link to="/settings">个人设置</router-link>
        <i></i>
        <router-link to="/logout">退出</router-link>
      </template>
      <!-- 如果尚未登录 -->
      <template v-else>
        <router-link to="/login">登录</router-link>
        <i></i>
        <router-link to="/register">注册</router-link>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Status',
  data(){
    return {
      nickname: ''
    }
  },
  created(){
    // 如果用户是已经登录的
    if( this.$root.logged ) {
      // 则从 sessionStorage 取得 token
      let token = sessionStorage.getItem( 'token' );
      // 发送请求查询用户信息 ( 需要在请求头中携带 token )
      this.axios.get( '/customer/load' , { 
                  headers: { 'authorization': token } 
                }).then(resp=>{
                  console.log( resp );
                  let { nickname } = resp.data.customer ;
                  this.nickname = nickname ;
                }).catch(error=>{
                  console.log( error );
                });
    }
  }
}
</script>

<style>
.status-wrapper {
  /** 使当前元素成为弹性容器 */
  display: flex; 
  /** 设置弹性容器的主轴(即弹性项目在弹性容器中首先沿那个方向排列) */
  flex-direction: row ; /** row 表示沿水平方向从左到右排列 */
  justify-content: space-between;
  border-bottom: 1px solid #dedede ;
}

.status-wrapper>div {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}

.slogan {
  /** 设置弹性项目在弹性容器主轴方向上的尺寸 */
  flex-basis: 300px;
}

/** .status 首先是个 弹性项目 ，其次还是一个 弹性容器  */
.status {
  /** 使当前元素成为一个弹性容器 */
  display: inline-flex ;
  /** 设置弹性容器的主轴(即弹性项目首先沿那个方向排列) */
  flex-direction: row;
  /** 主轴方向对齐方式 */
  justify-content: flex-end;
  /** 设置弹性项目在弹性容器主轴方向上的尺寸 */
  flex-basis: 600px;
}

.status>i {
  margin: 9px 5px ;
  height: 14px;
  border-left: 1px solid #333;
  border-right: 1px solid #ff0;
}
</style>